<template>
    <div class="home">
        <div class="head-control" :style="{backgroundColor:'rgba(0,214,192,'+topBg+')'}">
            <div class="search">
                <img src="./image/search.png" alt="">
                <input type="text" placeholder="搜索感兴趣的商品" v-model="searchValue">
                <div class="search-btn" @click.stop="search()">搜索</div>
            </div>
            <div class="btn_cell" @click.stop="turn('/cart')">
                <img src="./image/cart.png" alt="">
            </div>
            <div @click="goMyAnswer('/myAnswer')" class="btn_cell">
                <img src="./image/msg.png" alt="">
            </div>
        </div>
        <div class="tab_bar"
             style="position: fixed;top: 50px;z-index: 855;"
             :style="{opacity:showTabBar||tabBarSelect?1:0,zIndex:showTabBar||tabBarSelect?888:0}">
            <cube-scroll
                    ref="scrollTab"
                    direction="horizontal"
                    :scroll-events="['scroll']"
                    @scroll="tabScroll"
                    class="horizontal-scroll-list-wrap">
                <ul class="list-wrapper">
                    <li v-for="(item,index) in tabBarList" :key="item.id" class="list-item"
                        @click="changeTabBar(item.id)"
                        :class="{selected:tabBarSelect==item.id}">{{ item.name }}
                    </li>
                </ul>
            </cube-scroll>
        </div>
        <cube-scroll
                class="side_scroll"
                ref="sideScroll"
                :scroll-events="['scroll']"
                @scroll="mainScroll"
                @pulling-up="refreshScroll()"
                :options="options">
            <div class="banner" v-show="!tabBarSelect">
                <cube-slide ref="slide" :interval="5000">
                    <cube-slide-item v-for="(item, index) in homeData.bannerList" :key="item.id">
                        <a><img class="banner_img" :src="imgH+item.img" @click="toPage(item.url)"></a>
                    </cube-slide-item>
                </cube-slide>
            </div>
            <div class="tab_bar" v-show="!tabBarSelect">
                <cube-scroll
                        ref="scrollTabBar"
                        direction="horizontal"
                        :scroll-events="['scroll']"
                        @scroll="tabBarScroll"
                        class="horizontal-scroll-list-wrap">
                    <ul class="list-wrapper">
                        <li v-for="(item,index) in tabBarList" :key="item.id" class="list-item"
                            @click="changeTabBar(item.id)"
                            :class="{selected:tabBarSelect==item.id}">{{ item.name }}
                        </li>
                    </ul>
                </cube-scroll>
            </div>
            <div class="menu_bar"  v-show="!tabBarSelect">
                <cube-scroll
                        ref="scrollH"
                        direction="horizontal"
                        :scroll-events="['scroll']"
                        @scroll="menubarScroll"
                        class="horizontal-scroll-list-wrap">
                    <ul class="list-wrapper" ref="scrollContent">
                        <li class="list-item" v-for="(items,index) in menubarList" ref="listItem" :key="index">
                            <div class="cell" v-for="item in items" :key="item.id" @click="toMenu(item.id)">
                                <img :src="imgH+item.img" alt="">
                                <div class="desc">{{item.name}}</div>
                            </div>
                        </li>
                    </ul>
                </cube-scroll>
                <div class="tips">
                    <div :style="{width:tipsWidth+'px',marginLeft:tipsMargin+'px'}"></div>
                </div>
            </div>
          <div style="background: white;padding: 0 10px">
            <div class="daily_select bg" style="margin-top: 0;" v-show="!tabBarSelect">
                <div class="title" @click="turn('/daily')">
<!--                    <img src="./image/daily.png" alt="">-->
<!--                    <div class="title_name">每日优选</div>-->
<!--                    <div class="title_tag"><span>正品保障</span></div>-->
<!--                    <span class="title_more">查看更多</span>-->
<!--                    <img class="more_img" src="./image/Path.png" alt="">-->

                </div>
                <div class="content" >
                  <threeSlide :type="1" :list="dailyList"></threeSlide>
                </div>
            </div>
          </div>
          <div style="background: white;padding: 0 10px">
          <div class="daily_select" v-show="!tabBarSelect" style="width: 100%">
            <div class="title" @click="turn('/goodslist?type=undefined&saletype=0')">
              <img src="./image/shareType.png" alt="">
              <div class="title_name">分享有利</div>
              <div class="title_tag"><span>正品保障</span></div>
              <span class="title_more">查看更多</span>
              <img class="more_img" src="./image/Path.png" alt="">

            </div>
            <div class="content">
              <threeSlide :list="storeList"></threeSlide>
            </div>
          </div>
          </div>

<!--            <div class="boutique" v-show="!tabBarSelect">-->
<!--                <div class="title" @click="turn('/goodslist?type=undefined&saletype=5')">-->
<!--                    <img src="./image/boutique.png" alt="">-->
<!--                    <div class="title_name">精选采购</div>-->
<!--                    <div class="title_tag"><span>必买好货</span></div>-->
<!--                    <span class="title_more">查看更多</span>-->
<!--                    <img class="more_img" src="./image/Path.png" alt="">-->
<!--                </div>-->
<!--                <cube-scroll-->
<!--                        ref="boutique_scroll"-->
<!--                        direction="horizontal"-->
<!--                        :scroll-events="['scroll']"-->
<!--                        @scroll="boutiqueScroll"-->
<!--                        class="boutique_scroll"-->
<!--                >-->
<!--                    <ul class="list-wrapper" ref="boutique_scroll_content">-->
<!--                        <li class="list-item" ref="boutique_list_item" v-for="item in storeList" :key="item.id" @click="turn('/detail?id='+item.id)">-->
<!--                            <img class="goods_img" :src="imgH+item.img" alt="">-->
<!--                            <div class="goods_detail">-->
<!--                                <div class="goods_name">{{item.name}}</div>-->
<!--                                <div class="bottom">-->
<!--                                    <div class="price">¥{{item.nowPrice?item.nowPrice:'00'}}</div>-->
<!--                                    <img src="./image/share.png" alt="">-->
<!--                                </div>-->
<!--                            </div>-->
<!--                            <div class="goodStuff"><span>精选好货</span></div>-->
<!--                        </li>-->
<!--                    </ul>-->
<!--                </cube-scroll>-->
<!--                <div class="tips">-->
<!--                    <div :style="{width:boutiqueWidth+'px',marginLeft:boutiqueMargin+'px'}"></div>-->
<!--                </div>-->
<!--            </div>-->
            <div class="goods_list" v-show="!tabBarSelect">
                <div class="list_title">
                    <img src="./image/listSquar.png" alt="">
                    <div class="name">精选单品</div>
                    <img src="./image/listSquar.png" alt="">
                </div>
                <div class="list_content">
                    <div class="stable">
                        <div class="item" v-for="item in leftTopList" :key="item.id" @click="turn('/detail?id='+item.id)">
                            <img class="mainImg" v-lazy="imgH+item.img" alt="">
                            <div class="goods_detail">
                                <div class="goods_name">
                                    <span v-if="item.act&&item.act.maxCoupon">可用优惠券</span>
                                    {{item.name}}
                                </div>
                              <div class="tips"  v-if="item.act&&(item.act.cashReward||item.act.voucherReward)">
                                    <div class="cell " v-if="item.act&&item.act.cashReward">
                                        <p class="red">分享立赚&nbsp;&nbsp;¥{{item.act.cashReward.split('_')[1].split('.')[1]?item.act.cashReward.split('_')[1]:item.act.cashReward.split('_')[1] +'.00'}}</p>
                                    </div>
                                    <div class="cell " v-if="item.act&&item.act.voucherReward">
                                        <p class="yellow">送换购券&nbsp;&nbsp;¥{{item.act.voucherReward.split('_')[1].split('.')[1]?item.act.voucherReward.split('_')[1]:item.act.voucherReward.split('_')[1] +'.00'}}</p>
                                    </div>
                                </div>
                                <div class="bottom">
                                    <!-- <div class="now_price">¥{{item.nowPrice?item.nowPrice.toFixed(2):'0.00'}}</div>
                                    <div class="old_price">¥{{item.oldPrice?item.oldPrice.toFixed(2):'0.00'}}</div> -->
                                    <div class="now_price">¥{{item.nowPrice?parseInt(item.nowPrice):'00'}}</div>
                                    <div class="doublePrice">.{{item.nowPrice?item.nowPrice.toFixed(2).split('.')[1]:'00'}}</div>
                                    <div class="old_price">¥{{item.oldPrice?item.oldPrice.toFixed(2):'0.00'}}</div>
                                    <img src="./image/toShare.png" alt="">
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="change">
                        <div class="item" v-for="item in rightTopList" :key="item.id" @click="turn('/detail?id='+item.id)">
                            <img class="mainImg" v-lazy="imgH+item.img" alt="">
                            <div class="goods_detail">
                                <div class="goods_name">
                                    <span v-if="item.act&&item.act.maxCoupon">可用优惠券</span>
                                    {{item.name}}
                                </div>
                                <div class="tips"  v-if="item.act&&(item.act.cashReward||item.act.voucherReward)">
                                    <div class="cell " v-if="item.act&&item.act.cashReward">
                                        <p class="red">送代金券&nbsp;&nbsp;¥{{item.act.cashReward.split('_')[1].split('.')[1]?item.act.cashReward.split('_')[1]:item.act.cashReward.split('_')[1] +'.00'}}</p>
                                    </div>
                                    <div class="cell " v-if="item.act&&item.act.voucherReward">
                                        <p class="yellow">送换购券&nbsp;&nbsp;¥{{item.act.voucherReward.split('_')[1].split('.')[1]?item.act.voucherReward.split('_')[1]:item.act.voucherReward.split('_')[1] +'.00'}}</p>
                                    </div>
                                </div>
                                <div class="bottom">
                                    <div class="now_price">¥{{item.nowPrice?parseInt(item.nowPrice):'00'}}</div>
                                    <div class="doublePrice">.{{item.nowPrice?item.nowPrice.toFixed(2).split('.')[1]:'00'}}</div>
                                    <div class="old_price">¥{{item.oldPrice?item.oldPrice.toFixed(2):'0.00'}}</div>
                                    <img src="./image/toShare.png" alt="">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <head-lines
                    v-if="headGoodsList&&tabBarSelect"
                    :list="headGoodsList"
                    :id="tabBarSelect"
                    style="margin-top: 100px"
            ></head-lines>
            <toplist v-show="tabBarSelect" :items="homeData.topList"></toplist>
            <div style="height: 60px;width: 100%"></div>
        </cube-scroll>
        <img v-if="lotteryFlag" class="lottery" src="./image/lottery.gif" @click="turn('/lottery/detail')">
    </div>
</template>

<script>
    import {topList, bannerList, getMenubarList, getTabBarType} from "@/api/home"
    import toplist from '@/components/top-list'
    import headLines from '@/components/head-lines'
    import threeSlide from '@/components/three-slide'
    export default {
        name: "home",
        components:{toplist,headLines,threeSlide},
        data() {
            return {
                tipsWidth: 0,
                tipsMargin: 0,
                maxScroll: 0,

                boutiqueWidth: 0,
                boutiqueMargin: 0,
                boutiqueMaxScroll: 0,

                topBg: 0,
                options: {pullUpLoad: true},
                homeData: {
                    bannerList: [],
                    topList: []
                },
                imgH: process.env.VUE_APP_IMG_DOMAIN,
                lotteryFlag: false,
                tabBarList: [],
                homeList: [],
                headGoodsList: [],
                tabBarSelect: 0,

                menubarList:[],
                searchValue:'',
                showTabBar:false,
                dailyList:[],
                storeList:[],

                page:1,
                tabId:null,
                leftTopList:[],
                rightTopList:[],
                flag:true,
            }
        },
        activated() {
            this.getBannerList()
            this.getTabBarList()
            this.getMenubarList()
            this.refreshScroll()
        },
        methods: {
            menubarScroll(e) {
                let x = -e.x
                let tipsLast = 46 - this.tipsWidth
                if (x >= 0 && x <= this.maxScroll) {
                    this.tipsMargin = -(e.x / this.maxScroll) * tipsLast
                }
            },
            boutiqueScroll(e) {
                let x = -e.x
                let tipsLast = 46 - this.boutiqueWidth
                if (x >= 0 && x <= this.boutiqueMaxScroll) {
                    this.boutiqueMargin = -(e.x / this.boutiqueMaxScroll) * tipsLast
                }
            },
            mainScroll(e) {
                let y = -e.y
                if (y >= 0 && y <= 200) {
                    this.topBg = y / 200
                }
                if (y>=150){
                    this.showTabBar = true
                }else {
                    this.showTabBar = false
                }
                if (this.tabBarSelect){
                    this.topBg = 1
                }
            },
            getBannerList() {
                bannerList(0).then(res => {
                    this.homeData.bannerList = res.data.filter(banner => {
                        return banner.type === 0
                    })
                    this.$nextTick(() => {
                        this.$refs.slide.refresh()
                    })
                })
            },
            async getTabBarList() {
                const res = await getTabBarType()
                this.lotteryFlag = res.extra.flag
                this.tabBarList = res.data
                this.tabBarList.unshift({name: '推荐', id: 0,})
                this.homeList = res.extra.home
                this.headGoodsList = this.homeList

                this.$nextTick(()=>{
                    this.$refs.scrollTab.refresh()
                    this.$refs.scrollTabBar.refresh()
                })
            },
            changeTabBar(index){
                this.$refs.sideScroll.scrollTo(0,0,500)
                if (!this.flag){
                    return
                }
                this.flag = false
                this.tabBarSelect = index
                this.page = 1
                this.homeData.topList = []
                this.rightTopList = []
                this.leftTopList = []
                this.refreshScroll()
                if(index==0){
                    this.headGoodsList=this.homeList
                }
                this.tabBarList.forEach(item=>{
                    if(item.id==index){
                        this.headGoodsList=item.children
                        // console.log(this.headGoodsList)
                        return
                    }
                })
            },
            async getMenubarList(){
                const res = await getMenubarList()
                this.dailyList = res.extra.dailyList
                this.storeList = res.extra.storeList
                this.menubarList = []
                let arr
                for (let i = 1; i < res.data.length; i++) {
                    if (i%2==1){
                        arr = []
                        this.menubarList.push(arr)
                    }
                    arr.push(res.data[i-1])
                }
                this.$nextTick(()=>{
                    this.tipsWidth = (document.body.clientWidth / this.$refs.scrollContent.offsetWidth) * 46
                    this.maxScroll = this.$refs.scrollContent.offsetWidth - document.body.clientWidth

                    // this.boutiqueWidth = (document.body.clientWidth / this.$refs.boutique_scroll_content.offsetWidth) * 46
                    // this.boutiqueMaxScroll = this.$refs.boutique_scroll_content.offsetWidth - document.body.clientWidth

                    // this.$refs.dailySlide.refresh()
                    // this.$refs.boutique_scroll.refresh()
                    this.$refs.scrollH.refresh()
                })
            },
            goMyAnswer(path){
              this.$router.push(path)
            },
            search(){

                if(this.searchValue==''){
                    return
                }
                this.$router.push({
                    path:`/goodslist?name=${this.searchValue}&ways=search`
                })
            },
            tabScroll(e){
                if (this.showTabBar){
                    this.$refs.scrollTabBar.scrollTo(e.x,0,100)
                }

            },
            tabBarScroll(e){
                if (!this.showTabBar){
                    this.$refs.scrollTab.scrollTo(e.x,0,100)
                }
            },
            getTopList() {

                let id = this.tabBarSelect
                if(id==0){
                    id = null
                }
                topList(this.page,id,1).then(res => {
                    if(this.page==1){
                        this.homeData.topList = res.data
                    }else {
                        this.homeData.topList= this.homeData.topList.concat(res.data)

                    }
                  this.rightTopList = []
                  this.leftTopList = []
                  this.homeData.topList.forEach((item,index)=>{
                        if (index%2==1){
                            this.rightTopList.push(item)
                        }else {
                            this.leftTopList.push(item)
                        }
                    })
                    this.page ++
                    this.flag = true

                    this.$nextTick(()=>{

                        this.$refs.sideScroll.refresh()
                        this.$refs.sideScroll.forceUpdate(true, true)
                    })
                })
            },
            refreshScroll(){

                this.getTopList()
            },
            turn(path){
                this.$router.push({
                    path
                })
            },
            toPage(url){
                // let link = id
                // if (!id){
                //     link = 1
                // }
                // this.$router.push({
                //     path:'/goodslist?type=0&saletype='+link
                // })
              if(url){
                window.location.href = url
              }
            },
            toMenu(path){
              if (path==1){
                this.$router.push({
                  path:'/goodslist/agent',
                  query:{
                    saleTypeId:path
                  }
                })
                return
              }
                if (path==15){
                    this.$router.push({
                        path:'/material'
                    })
                    return
                }
                if (path==13){
                    this.$router.push({
                        path:'/shopList'
                    })
                    return
                }
                if (path==20){
                    // this.$router.push({
                    //     path:'/liveList'
                    // })
                    this.turn('/daily')
                    return
                }
                this.$router.push({
                    path:`/goodslist?type=${this.id}&saletype=${path}`
                })
            }

        }
    }
</script>

<style scoped lang="stylus">
    .goodStuff
       display inline-block
       position absolute
       top 2.12rem
       color #fff
       width 1.25rem
       height 0.35rem
       border-radius 0 0.34rem 0.34rem 0
       padding: 0.06rem 0
       background-color rgba(0,0,0,0.25)
       line-height 0.35rem
       text-align center
       font-size 0.24rem
    .home
        background-color: #f4f3f3
        height 100%

        .head-control
            display flex
            position fixed
            top 0
            z-index: 998;
            padding 9px 12px
            width calc(100% - 24px)

            .search
                display flex
                height 32px
                border-radius 30px
                align-items center
                background-color: #fff
                padding-left 5.5px
                /*flex 1*/
                width 273px
                img
                    width 20px
                    height 20px

                .search-btn
                    width 59px
                    height 32px
                    line-height 32px
                    text-align center
                    background-color: #defefb
                    color #00d6c0
                    font-size 14px
                    border-radius 16px

                input
                    flex 1
                    margin 0 8px
                    outline none
                    font-size 14px
                input:

                :-webkit-input-placeholder
                    color #999
                    opacity 0.5

                input:-moz-placeholder
                    color #999
                    opacity 0.5
                input:

                :-moz-placeholder
                    color #999
                    opacity 0.5

                input:-ms-input-placeholder
                    color #999
                    opacity 0.5

            .btn_cell
                width 32px
                height: 32px
                border-radius 50%
                background-color: rgba(51, 51, 51, 0.25);
                display flex
                justify-content center
                align-items center
                margin-left 7px

                img
                    width: 20px
                    height: 20px

        .banner
            position relative
            /*width 375px*/
            height 200px
            overflow hidden
            transform translateY(0)

            .banner_img
                width 100%
                height 200px

            /deep/ .cube-slide-dots
                bottom 10px
                text-align left
                padding 0
                left 33px

                > span
                    background-color: #FFFFFF;
                    opacity 1
                    width 5px
                    height 3px
                    border-radius 1.5px

                > span.active
                    background-color: #00D6C0

        .tab_bar
            width 100%
            background-color: #FFFFFF

            .horizontal-scroll-list-wrap
                height 39px

                /deep/ .cube-scroll-content
                    display: inline-block

                .list-wrapper
                    line-height: 39px
                    white-space: nowrap

                .list-item
                    display: inline-block
                    color #333
                    font-size 14px
                    padding 0 11px
                    position relative

                .selected
                    font-weight bold
                    font-size 17px

        .menu_bar
            width 100%
            background-color: #fff
            height 184px
            padding-top 3px

            .horizontal-scroll-list-wrap
                height 160px

                /deep/ .cube-scroll-content
                    display: inline-block

                .list-wrapper
                    white-space: nowrap
                    height 100%
                    padding 0 10px

                .list-item
                    display: inline-block
                    padding 0 10px
                    height 100%

                    > :first-child
                        margin-bottom 15px

                    .cell
                        width 52px
                        display flex
                        flex-direction column
                        justify-content center
                        align-items center

                        img
                            width: 52px
                            height: 52px

                        .desc
                            font-size 12px
                            color #333
                            margin-top 0.133rem

            .tips
                width 46px
                background-color: #f4f3f3
                height 3px
                border-radius 1.5px
                margin 0 auto
                margin-top 10px

                div
                    height 3px
                    background-color: #00d6c0

        .daily_select
            height 181px
            margin 0 auto
            background-color: #fff
            margin-top 9px
            border-radius 5px
            padding-bottom 12px
            .title
                display flex
                padding 11px 3.5px 11px 5.5px
                justify-content space-between
                align-items center
                img
                    width: 21px
                    height: 21px

                .title_name
                    color #333
                    font-size 15px
                    margin-left 3.5px
                    margin-right 9px
                    font-weight bold

                .title_tag
                    flex 1
                    display flex
                    align-items center

                    span
                        background-color: #defefb
                        font-size 8px
                        color #00d6c0
                        padding 3px 4px

                .title_more
                    font-size 12px
                    color #333
                .more_img
                    width 10px
                    height 10px
                    margin-left 3px
                    margin-bottom 0.8px

            .content
                padding  0 20px
                height 125px
                padding-bottom 20px
                .cube-slide
                    height 100%

                .slide_item
                    display flex

                    img
                        width: 103px
                        height: 103px
                        margin-right 11.5px
                        margin-left 3px
                        object-fit:cover

                    .goods_detail
                        flex 1
                        border-radius 0.26rem

                        .goods_name
                            color #333
                            width 220px
                            font-size 15px
                            line-height 0.55rem
                            white-space: nowrap;
                            text-overflow: ellipsis;
                            overflow: hidden;
                            word-break: break-all;

                        .goods_desc
                            width 220px
                            margin-top 5px
                            font-size 10px
                            color #999
                            white-space: normal;
                            overflow: hidden;
                            text-overflow: ellipsis;
                            display: -webkit-box;
                            -webkit-box-orient: vertical;
                            -webkit-line-clamp: 2;

                        .goods_shop
                            display flex
                            justify-content space-between
                            align-items center
                            margin-top 20px

                            .goods_price

                                .old
                                    font-size 12px
                                    color #c8c8c8
                                    text-decoration: line-through
                                .new
                                    font-size 18px
                                    color #00d6c0

                            .buy
                                width 61px
                                height 27px
                                background-color: #00d6c0
                                color #FFFFFF
                                font-size 14px
                                text-align center
                                line-height 27px
                                border-radius 7px 0 7px 0
            &.bg
              background url("./image/daybg.png")
              background-size  100% 100%
              height 220px
              display flex
              flex-direction column
              .title
                height 20px
              .content
                flex 1
                display flex
                align-items center
                padding  0 20px
                overflow hidden
                /deep/ .cube-slide-dots
                    height 4px
                    /*bottom  -15px*/

                    span
                        height 4px
                        background-color: #00d6c0
                        opacity 0.5
                        border-radius 2px

                    > span.active
                        opacity 1

        .boutique
            width 351px
            margin 0 auto
            background-color: #fff
            margin-top 9px
            border-radius 5px
            padding-bottom 15px

            .title
                display flex
                padding 11px 3.5px 11px 5.5px
                justify-content space-between
                align-items center

                img
                    width: 21px
                    height: 21px

                .title_name
                    color #333
                    font-size 15px
                    margin-left 3.5px
                    margin-right 9px
                    font-weight bold

                .title_tag
                    flex 1
                    display flex
                    align-items center

                    span
                        background-color: #defefb
                        font-size 8px
                        color #00d6c0
                        padding 3px 4px

                .title_more
                    font-size 12px
                    color #333
                .more_img
                    width 10px
                    height 10px
                    margin-left 3px
                    margin-bottom 0.8px

            .boutique_scroll
                /deep/ .cube-scroll-content
                    display: inline-block

                .list-wrapper
                    white-space: nowrap
                    padding 0 10.5px

                .list-item
                    display: inline-block
                    margin-right 5px
                    width: 97px
                    height: 143px
                    background-color: #f4f3f3

                    .goods_img
                        width: 97px
                        height: 97px
                        object-fit:cover

                    .goods_detail
                        padding 0 10px 0 6.5px

                    .goods_name
                        width 80px
                        color #333
                        font-size 12px
                        line-height 0.55rem
                        white-space: nowrap;
                        text-overflow: ellipsis;
                        overflow: hidden;
                        word-break: break-all;

                    .bottom
                        display flex
                        justify-content space-between
                        align-items center

                        .price
                            color #00d6c0
                            font-size 15px

                        img
                            width: 16px
                            height: 16px

            .tips
                width 46px
                background-color: #f4f3f3
                height 3px
                border-radius 1.5px
                margin 0 auto
                margin-top 10px

                div
                    height 3px
                    background-color: #00d6c0


        .goods_list
            margin-top 20px
            padding 0 11px

            .list_title
                display flex
                justify-content center
                align-items center

                img
                    width: 11px
                    height: 11px

                .name
                    color #333
                    font-size 15px
                    font-weight bold
                    margin 0 9px

            .list_content
                display flex
                flex-flow row
                overflow: hidden
                margin-top 13px

                .stable
                    width 49%
                    margin-right 2%
                    overflow: hidden

                .change
                    flex 1
                    overflow hidden

                .item
                    width 100%
                    background-color: #fff
                    margin-top 9px
                    border-radius 0.13rem
                    overflow hidden

                    .mainImg
                        width 100%
                        height 172px
                        object-fit:cover

                    .goods_detail
                        padding 7px
                        padding-top 0
                        overflow hidden
                        .goods_name
                            color #333
                            font-size 0.3733rem
                            overflow: hidden;
                            display: inline-block;
                            width 100%
                            -webkit-line-clamp: 1;
                            line-clamp: 1;
                            white-space nowrap
                            text-overflow: ellipsis;
                            -webkit-box-orient: vertical;
                            justify-content: space-between;
                            span
                                background-color: #00d6c0
                                border-radius 2.5px
                                font-size 0.24rem
                                color #FFFFFF
                                padding 2px
                        .tips
                            display flex
                            justify-content space-between
                            align-items center
                            position relative
                            height 15px
                            margin-top -0.1rem

                            .cell
                                width 48%
                                /*line-height 7px*/
                                height 14px

                                p
                                    /*border 1px solid #E33960*/
                                    font-size 16px
                                    border-radius 2.5px
                                    white-space nowrap
                                    transform scale(0.5)
                                    display inline-block
                                    transform-origin 0 0
                                    padding 6px 6px

                            .red
                                color #fe4b38
                                background-color: #fee0dd

                            .yellow
                                color #ff9616
                                background-color: #fff7de

                        .bottom
                            display flex
                            justify-content space-between
                            align-items flex-end
                            margin-top 10px

                            .now_price
                                color #333
                                font-size 18px
                            .doublePrice
                                font-size 12px
                                color #333

                            .old_price
                                flex 1
                                color #c8c8c8
                                font-size 12px
                                margin-left 4px
                                text-decoration:line-through;

                            img
                                width: 20px
                                height: 20px
        .lottery
            position fixed
            z-index 898
            width: 117px
            height 100px
            right 0
            bottom 64px

</style>
